
import { Button, Card, Dropdown, Modal } from 'antd'
import {
    ExportOutlined,
    CaretDownOutlined,
    SunOutlined,
    MoonOutlined,
} from '@ant-design/icons'
import { useNavigate } from 'react-router'
import logoImg from '@/assets/images/logo.png'
import './style.less'
import { useUserStore } from '@/store'

function Header() {
    const { userInfo, logout } = useUserStore()

    // 路由hook
    const navigate = useNavigate()
    // Antd的Modal组件API
    const [modal, contextHolder] = Modal.useModal()

    // 退出登录
    const onLogout = () => {
        modal.confirm({
            title: '确定要退出系统么？',
            okText: '退出',
            onOk: () => {
                logout()
                // 跳转至路径地址/login
                navigate('/login', { replace: true }) // 跳转到登录页
            },
        })
    }

    const menuItems = [
        {
            label: '退出登录',
            key: 'exit',
            icon: <ExportOutlined />,
            onClick: onLogout,
        },
    ]

    return (
        <Card className="M-header" variant="borderless">
            <div className="header-wrapper">
                <div className="logo-con">
                    <img src={logoImg} alt="" />
                    <span className="logo-text">Vite React APP</span>
                </div>
                <div className="header-con">


                    <Dropdown menu={{ items: menuItems }}>
                        <div className="user-menu">
                            <span>
                                {userInfo ? userInfo.nickName : '未登录'}
                            </span>
                            <CaretDownOutlined className="arrow" />
                        </div>
                    </Dropdown>
                </div>
            </div>
            {contextHolder}
        </Card>
    )
}

export default Header
